<template>
    <div class="container">
        <div class="store">
            <el-image class="store-logo" :src="storeInfo.logo" fit="fill">
                <template #error>
                    <div class="store-empty">
                        <img src="@/assets/imgs/logo/default.png" />
                    </div>
                </template>
            </el-image>
            <div class="store-name">
                <div class="store-head">
                    <p>商城名称：{{ storeInfo.tenantName || '' }}</p>
                    <span v-auth="'storeInfo:auth'">
                        <span
                            v-if="storeInfo.identStatus === 1"
                            class="store-certification pointer"
                            @click="jumpAuthHandler(0)">
                            去认证
                        </span>
                    </span>

                    <span v-if="storeInfo.identStatus === 3" class="store-auth">
                        <img src="@/assets/imgs/sys/auth-doing.png" />
                        认证中
                    </span>
                    <span v-show="storeInfo.identStatus === 4">
                        <span v-if="!permissions.has('storeInfo:auth')" class="store-fail">
                            <img src="@/assets/imgs/sys/auth-fail.png" />
                            认证失败
                        </span>
                        <span v-auth="'storeInfo:auth'" class="store-fail pointer" @click="jumpAuthHandler(3)">
                            <img src="@/assets/imgs/sys/auth-fail.png" />
                            认证失败
                        </span>
                    </span>

                    <span v-if="storeInfo.identStatus === 2" class="store-success">
                        <img src="@/assets/imgs/sys/auth-success.png" />
                        已认证
                    </span>
                </div>
                <div class="store-time">创建时间：{{ storeInfo.createdAt }}</div>
            </div>
        </div>
        <div class="infoList">
            <span>商户ID：</span>
            <p v-if="storeInfo.tenantId">
                {{ storeInfo.tenantId || '' }}
                <img
                    src="@/assets/imgs/sys/auth-copy.png"
                    v-if="storeInfo.tenantId"
                    @click="copyStoreNo(storeInfo.tenantId)" />
                <img v-auth="'storeInfo:edit'" src="@/assets/imgs/sys/auth-edit.png" @click="jumpEdit" />
            </p>
        </div>
        <div class="infoList">
            <span>企业信息：</span>
            <p>{{ storeInfo.merchantName || '' }}</p>
        </div>
        <div class="infoList">
            <span>经营类目：</span>
            <p class="category">
                <i v-for="(item, index) in storeInfo.cateList" :key="index" index
                    >{{ item.categoriesFirstName }}/{{ item.categoriesSecondName }}</i
                >
            </p>
        </div>
        <div class="infoList">
            <span>商城简介：</span>
            <p>
                {{ storeInfo.tenantDesc }}
            </p>
        </div>
        <div class="infoList">
            <span>联系人：</span>
            <p>{{ storeInfo.contactName || '' }}</p>
        </div>
        <div class="infoList">
            <span>联系电话：</span>
            <p>{{ storeInfo.contactMobile || '' }}</p>
        </div>
        <div class="infoList">
            <span>绑定账号：</span>
            <p>{{ storeInfo.userPhone }}</p>
        </div>
    </div>
</template>
<script setup>
import { reactive, onMounted } from 'vue';
import storage from '@/commons/storage';
import store from '@/store';
import { useRouter } from 'vue-router';
import request from '@/request';
import { ElMessage } from 'element-plus';

const useAuth = store.useAuthStore();
const permissions = useAuth.permissions;
const useIdent = store.useIdentStore();
const router = useRouter();
const storeInfo = reactive({
    // 商城名称
    tenantName: '',
    // 状态 1-待认证 3-认证中 4-认证失败 2-已认证
    status: '1',
    // logo
    logo: '',
    // 认证完成时间
    activeAt: '',
    // 商城编号
    regNo: '',
    // 企业信息（企业名称）
    merchantName: '',
    // 经营类目
    catedivst: [],
    // 商城简介
    introduction: '',
    // 联系人
    contactName: '',
    // 联系电话
    contactMobile: ''
});
// 调转企业认证
const jumpAuthHandler = status => {
    router.push({ path: '/store/info/auth', query: { status } });
};
onMounted(async () => {
    const { data } = await request('tenantInfo', {
        tenantId: storage.get('ZW-TENANT-ID')
    });
    Object.assign(storeInfo, data);
    useIdent.setTenantInfo(data);
});
const jumpEdit = () => {
    // identStatus 1-待认证跳转编辑，全部可以编辑
    // 2-已认证 仅可编辑联系人、联系电话、商城简介、商城名称、商城LOGO 字段(用户一旦创建小程序，就可不已再编辑)
    // 3-申请中 仅可编辑联系人、联系电话、商城简介、商城名称、商城LOGO 字段
    // 4-已驳回 全部可以编辑
    const createMp = false;
    if (storeInfo.status !== 2) {
        router.push({ path: '/company/add', query: { status: storeInfo.identStatus } });
    } else if (storeInfo.status === 2 && !createMp) {
        router.push({ path: '/company/add', query: { status: storeInfo.identStatus } });
    }
};
// 复制店铺号
const copyStoreNo = text => {
    try {
        if (navigator.clipboard) {
            // clipboard api 复制
            navigator.clipboard.writeText(text);
        } else {
            var textarea = document.createElement('textarea');
            document.body.appendChild(textarea);
            // 隐藏此输入框
            textarea.style.position = 'fixed';
            textarea.style.clip = 'rect(0 0 0 0)';
            textarea.style.top = '10px';
            // 赋值
            textarea.value = text;
            // 选中
            textarea.select();
            // 复制
            document.execCommand('copy', true);
            // 移除输入框
            document.body.removeChild(textarea);
        }
        ElMessage({
            type: 'success',
            message: '复制成功！'
        });
    } catch (error) {
        ElMessage({
            type: 'error',
            message: '复制失败！'
        });
    }
};
</script>
<style lang="scss" scoped>
p {
    margin: 0;
}
.container {
    padding-top: 18px;
}
.store {
    display: flex;
    padding-bottom: 16px;
    &-logo {
        width: 64px;
        height: 64px;
        margin-right: 11px;
    }
    &-name {
        display: flex;
        padding: 5px 0;
        flex-direction: column;
        justify-content: space-between;
        .store-head {
            display: flex;
            .pointer {
                cursor: pointer;
            }
        }
        p {
            display: flex;
            font-size: 16px;
            font-weight: 700;
            color: #33302d;
            line-height: 22px;
            align-items: baseline;
            margin-right: 12px;
        }
        span {
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            display: flex;
            align-items: center;
        }
        img {
            width: 16px;
            height: 16px;
            margin-right: 2px;
        }
    }
    &-certification {
        color: #ff6b00;
        text-decoration: underline;
    }
    &-auth {
        color: #4a90e2;
    }
    &-fail {
        color: #fe292b;
        text-decoration: underline;
    }
    &-success {
        color: #60b900;
    }
    &-time {
        font-size: 14px;
        font-weight: 400;
        color: #969696;
        line-height: 20px;
    }
}
.infoList {
    padding: 8px 0;
    display: flex;
    span {
        font-size: 14px;
        font-weight: 400;
        color: #969696;
        line-height: 20px;
        min-width: 70px;
    }
    p {
        font-size: 14px;
        font-weight: 400;
        color: #33302d;
        line-height: 20px;
        max-width: 1110px;
        display: flex;
        img {
            width: 16px;
            height: 16px;
            margin-left: 16px;
            cursor: pointer;
        }
    }
    .category {
        display: flex;
        flex-direction: column;
        i {
            font-size: 14px;
            font-weight: 400;
            color: #33302d;
            line-height: 20px;
            margin-bottom: 8px;
            font-style: normal;
        }
    }
}
.store-empty {
    width: 64px;
    height: 64px;
    img {
        display: block;
        width: 100%;
        height: 100%;
    }
}
</style>
